<template>
    <div class="app-container">
      <el-row :gutter="20">
        <el-col :span="24" :xs="24">
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>产品分类</span>
                <div class="right-menu">
                  <el-button
                    type="primary"
                    plain
                    icon="Plus"
                    @click="handleAdd"
                    v-hasPermi="['qep:category:add']"
                  >新增</el-button>
                </div>
              </div>
            </template>
            <el-table
              v-loading="loading"
              :data="categoryList"
              row-key="id"
              :default-expand-all="isExpandAll"
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="name" label="分类名称" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="orderNum" label="排序" width="100"></el-table-column>
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['qep:category:edit']">修改</el-button>
                  <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['qep:category:add']">新增</el-button>
                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['qep:category:remove']">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
  
      <!-- 添加或修改分类对话框 -->
      <el-dialog :title="title" v-model="open" width="500px" append-to-body>
        <el-form ref="categoryRef" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="上级分类" prop="parentId">
            <el-tree-select
              v-model="form.parentId"
              :data="categoryOptions"
              :props="{ label: 'name', value: 'id', children: 'children' }"
              value-key="id"
              placeholder="选择上级分类"
              check-strictly
              clearable
            />
          </el-form-item>
          <el-form-item label="分类名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入分类名称" />
          </el-form-item>
          <el-form-item label="显示排序" prop="orderNum">
            <el-input-number v-model="form.orderNum" :min="0" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </template>
  
  <script setup>
  import { listCategoryTree, getCategory, delCategory, addCategory, updateCategory } from "@/api/qep/category";
  import { ref, onMounted } from 'vue';
  import { ElMessageBox, ElMessage } from 'element-plus';
  
  const loading = ref(true);
  const isExpandAll = ref(true);
  const open = ref(false);
  const title = ref("");
  const categoryList = ref([]);
  const categoryOptions = ref([]);
  
  const categoryRef = ref();
  const form = ref({
    id: undefined,
    parentId: undefined,
    name: undefined,
    orderNum: 0
  });
  
  const rules = ref({
    name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
    orderNum: [{ required: true, message: "显示排序不能为空", trigger: "blur" }]
  });
  
  /** 查询产品分类列表 */
  function getCategoryList() {
    loading.value = true;
    listCategoryTree().then(response => {
      categoryList.value = response.data;
      loading.value = false;
    });
  }
  
  /** 查询部门下拉树结构 */
  function getTreeselect() {
    listCategoryTree().then(response => {
      categoryOptions.value = [{
        id: 0,
        name: '顶级分类',
        children: response.data
      }];
    });
  }
  
  /** 取消按钮 */
  function cancel() {
    open.value = false;
    reset();
  }
  
  /** 表单重置 */
  function reset() {
    form.value = {
      id: undefined,
      parentId: undefined,
      name: undefined,
      orderNum: 0
    };
    categoryRef.value?.resetFields();
  }
  
  /** 新增按钮操作 */
  function handleAdd(row) {
    reset();
    getTreeselect();
    if (row != null && row.id) {
      form.value.parentId = row.id;
    }
    open.value = true;
    title.value = "添加产品分类";
  }
  
  /** 修改按钮操作 */
  function handleUpdate(row) {
    reset();
    getTreeselect();
    getCategory(row.id).then(response => {
      form.value = response.data;
      open.value = true;
      title.value = "修改产品分类";
    });
  }
  
  /** 提交按钮 */
  function submitForm() {
    categoryRef.value.validate(valid => {
      if (valid) {
        if (form.value.id != undefined) {
          updateCategory(form.value).then(response => {
            ElMessage.success("修改成功");
            open.value = false;
            getCategoryList();
          });
        } else {
          addCategory(form.value).then(response => {
            ElMessage.success("新增成功");
            open.value = false;
            getCategoryList();
          });
        }
      }
    });
  }
  
  /** 删除按钮操作 */
  function handleDelete(row) {
    ElMessageBox.confirm('是否确认删除名称为"' + row.name + '"的数据项?', "警告", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(function() {
      return delCategory(row.id);
    }).then(() => {
      getCategoryList();
      ElMessage.success("删除成功");
    }).catch(() => {});
  }
  
  onMounted(() => {
    getCategoryList();
  });
  </script>
  
  <style scoped>
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .right-menu {
    margin-left: auto;
  }
  </style>